<template>
  <div class="detail-box">
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item><img :src="DetailData.img1" /></van-swipe-item>
      <van-swipe-item><img :src="DetailData.img2" /></van-swipe-item>
      <van-swipe-item><img :src="DetailData.img3" /></van-swipe-item>
      <van-swipe-item><img :src="DetailData.img4" /></van-swipe-item>
    </van-swipe>
    <div id="detail-text">
      <div class="title">
        {{ DetailData.title }}
      </div>
      <div class="money">
        <div class="share">
          <span>价格</span><span class="price">{{ DetailData.price }}</span>
        </div>
        <div class="share"><span>起批量</span><span class="num">1斤</span></div>
      </div>
      <div class="adderss">
        <span class="share">物流</span>
        <span class="detail-adderss">{{ DetailData.adders }}</span>
      </div>
      <div class="size">
        <span class="share">规格</span>
        <span class="num1">
          <span class="kg">{{ DetailData.unitprice }}g/斤</span>
          <span class=" ">{{ DetailData.startbuy }}斤可售</span>
        </span>
      </div>
      <div class="buynumber">
        <div class="text">购买数量</div>
        <van-stepper v-model="value" class="change" />
        <div class="oneprice">￥{{ value * DetailData.price }}</div>
      </div>
      <div class="caozuo">
        <span> <van-icon name="star-o" />收藏 </span>
        <van-button color="orange" size="small" @click="addCard"
          >加入进货单</van-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { Ref } from "vue";
import { useRoute } from "vue-router";
import { getDetailData } from "@/api/detail";
const value = ref(1);
const $route = useRoute();
let DetailData: any = ref({});
getDetailData({
  id: $route.query.goodsid as string,
}).then((res: any) => {
  DetailData.value = res[0];
});

function addCard() {
  const cardList = ref([]);
  if (localStorage.getItem("cardList")) {
    cardList.value = JSON.parse(localStorage.getItem("cardList"));
  }
  DetailData.value.buyNum = value.value
  cardList.value.push(DetailData.value);
  localStorage.setItem("cardList", JSON.stringify(cardList.value));
}
</script>

<style scoped>
.my-swipe {
  margin-bottom: 14px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.title {
  font-size: 14px;
  font-weight: 700;
  padding: 10px;
}
#detail-text {
  width: 100%;
  background-color: #fff;
  padding: 15px;
}
img {
  width: 95%;
}
.money {
  width: 100%;
  height: 60px;
  background-color: #eeee;
  padding: 10px;
}

.price {
  font-size: 14px;
  font-weight: 700;
  color: #1a9956;
  margin-left: 25px;
}
.share {
  font-size: 14px;
  color: #999;
}
.num {
  color: #666;
  font-size: 14px;
  margin-left: 25px;
}
.num1 {
  margin-left: 20px;
  border-bottom: 0.05rem dotted #666;
  display: inline-block;
  color: #333;
  font-size: 14px;
}
.detail-adderss {
  color: #333;
  font-size: 14px;
  margin-left: 20px;
}
.kg {
  margin-right: 20px;
  color: #333;
}
.size {
  margin-top: 10px;
}
.adderss {
  margin-top: 10px;
}
.buynumber {
  width: 100%;
  height: 40px;
  background-color: #f3f3f3;
  margin-bottom: 20px;
  padding: 0rem 10px;
  margin-top: 20px;
  display: flex;
  font-size: 14px;
  vertical-align: middle;
  line-height: 40px;
  justify-content: space-around;
}
.text {
  font-size: 14px;
  color: #1a9956;
}
.oneprice {
  font-size: 14px;
  color: #1a9956;
  font-weight: 700;
}
.caozuo {
  display: flex;
  justify-content: space-between;
  height: 50px;
  font-size: 14px;
  align-items: center;
  color: #808080;
}

</style>